<template>
  <div class="app-container" style="width:100%;">
    <el-aside style="padding-right: 10px; padding-left: 15px; padding-top: 0px;float:left;width:30%;background:none;">
      <div class="block" style="width:100%;height:500px;">
        <el-tree
          id="el-tree"
          ref="tree"
          class="filter-tree"
          :data="data2"
          node-key="id"
          :highlight-current="true"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        />
      </div>
    </el-aside>
    <el-aside style="padding-right: 5px; padding-left: 5px; padding-top: 0px;float:left;width:70%;background:none;">
      <el-form ref="form" label-width="80px" style="margin: 0 auto;width:50%;">
        <el-form-item label="上级目录" style="margin-top:50px;">
          <el-cascader ref="cascaderHandle" v-model="parentId" style="width:100%;" :disabled="upVisible" clearable :options="data2" :props="optionProps" :show-all-levels="false" @change="change">
            <template slot-scope="{ data }">
              <span @click="clickNode">{{ data.typeName }}</span>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="目录名称" style="margin-top:50px;">
          <el-input v-model="typeName" style="width:100%;" :disabled="upVisible" />
        </el-form-item>
        <el-form-item label="排序号" style="margin-top:50px;">
          <el-input v-model="sortNum" style="width:100%;" :disabled="upVisible" />
        </el-form-item>
      </el-form>
      <div style="margin: 0 auto;width:50%;padding-left:50px;padding-top:50px;">
        <el-button type="primary" @click="onNewData('form')">新增</el-button>
        <el-button type="primary" :disabled="upVisible" @click="onSave">保存</el-button>
        <el-button type="danger" @click="onRemove">删除</el-button>
      </div>
    </el-aside>
  </div>
</template>

<script>
import { Message } from 'element-ui'

import { getTreeList, saveData, disabled } from '@/api/projectCatalog'

export default {
  name: 'Zzjg',
  inject: ['getTree'],
  props: { // 第二种方式
    xiangmu: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      companyId: '',
      data: [],
      data2: [],
      form: {},
      defaultProps: {
        children: 'children',
        label: 'typeName'
      },
      upVisible: false,
      optionProps: {
        value: 'id',
        children: 'children',
        label: 'typeName',
        checkStrictly: true,
        expandTrigger: 'hover'
      },
      id: '',
      xiangmuId: '',
      parentId: '',
      typeName: '',
      sortNum: '',
      flag: ''
    }
  },
  created() {
    this.getTreeList()
  },
  methods: {
    getTreeList() {
      this.data = []

      getTreeList({ xiangmuId: this.xiangmu }).then(response => {
        this.data = response.data
        this.data2 = this.buildTree2(this.data)
      }).catch(response => {
      })
    },
    buildTree2(data) {
      var rdata = []
      for (let i = 0; i < data.length; i++) {
        var e1 = data[i]
        if (e1.parentId === '-1') {
          rdata.push(e1)
        }
        for (let j = 0; j < data.length; j++) {
          var e2 = data[j]
          if (e1.parentId === e2.id) {
            if (!e2.children) {
              e2.children = []
            }
            e2.children.push(e1)
          }
        }
      }
      return rdata
    },
    clickNode($event) {
      $event.target.parentElement.parentElement.firstElementChild.click()
      this.$refs.cascaderHandle.dropDownVisible = false
    },
    change(val) {
      const nodesObj = this.$refs['cascaderHandle'].getCheckedNodes()
      this.flag = nodesObj[0].data.flag
      this.companyId = nodesObj[0].data.departmentId
    },
    handleNodeClick(node, data, value) {
      if (data.level !== 1) {
        if (node.parentId !== '-1') {
          this.id = node.id
          this.xiangmuId = node.xiangmuId
          this.parentId = node.parentId
          this.typeName = node.typeName
          this.sortNum = node.sortNum
          this.flag = node.flag
        } else {
          this.$refs['form'].resetFields()
          this.id = ''
          this.xiangmuId = ''
          this.parentId = ''
          this.typeName = ''
          this.sortNum = ''
          this.flag = ''
        }
        this.upVisible = true
      }
    },
    onNewData(formName) {
      this.$refs[formName].resetFields()
      this.id = ''
      this.parentId = ''
      this.xiangmuId = ''
      this.typeName = ''
      this.sortNum = ''
      this.flag = ''
      this.upVisible = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.id = ''
      this.xiangmuId = ''
      this.parentId = ''
      this.typeName = ''
      this.sortNum = ''
      this.flag = ''
      this.upVisible = false
    },
    onSave() {
      if (this.typeName === '' || this.typeName === 'null' || this.typeName === undefined) {
        Message({
          message: '目录名称不能为空',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      if (this.flag === 'U') {
        this.form.departmentId = this.companyId
      }

      this.form.id = this.id

      if (Array.isArray(this.parentId)) {
        this.form.parentId = this.parentId[this.parentId.length - 1]
      } else {
        this.form.parentId = this.parentId
      }

      this.form.xiangmuId = this.xiangmu
      this.form.typeName = this.typeName
      this.form.sortNum = this.sortNum
      this.form.flag = this.flag
      saveData(this.form).then(response => {
        Message({
          message: '新增成功',
          type: 'success',
          duration: 5 * 1000
        })

        loading.close()
        this.getTreeList()
        this.getTree()
        this.resetForm('form')
      }).catch(response => {
        loading.close()
        this.getTreeList()
      })
    },
    onRemove() {
      if (this.id !== null && this.id !== undefined && this.id !== '') {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        disabled({ code: this.id }).then(response => {
          Message({
            message: '删除成功',
            type: 'success',
            duration: 5 * 1000
          })

          loading.close()
          this.getTreeList()
          this.resetForm('form')
        }).catch(response => {
          loading.close()
          this.getTreeList()
        })
      } else {
        Message({
          message: '请选择左侧目录',
          type: 'error',
          duration: 5 * 1000
        })
      }
    }
  }
}
</script>

<style>
</style>
